<div class="hbox hbox-auto-xs hbox-auto-sm" ng-init="app.settings.asideFolded = false; app.settings.asideDock = false;app.settings.container = true;" ng-controller="dashboardController">
  <!-- main -->
  <!--<div class="col">-->
    <!-- main header -->
    <!--<div class="bg-light lter b-b wrapper-md">-->
      <!--<div class="row">-->
        <!--<div class="col-sm-12 col-xs-12">-->
          <!--<h1 class="m-n font-thin h3 text-black">用户中心 </h1>-->
          <!--<small class="text-muted pull-right m-t-n-md">欢迎使用{{app.name}}</small>-->
        <!--</div>-->
      <!--</div>-->
    <!--</div>-->
    <!-- / main header -->
    <div class="wrapper-md">
      <div class="row ng-scope">
        <div class="col-sm-12">
          <div class="row row-sm text-center wrapper-sm">
            <div class="col-xs-6 m-b">
              <span class="block panel padder-v bg-info item">
                <span class="text-muted text-xs block m-b-xs">AppKey</span>
                <span class="text-white font-thin h2 block m-b-sm" ng-bind="userInfo.appKey"></span>
              </span>
              <div class="panel-footer text-center b m-t-n-md bg-light lter">
                <button class="btn m-b-xs btn-info" ng-click="resetAppKey()">重置AppKey</button>
              </div>
            </div>
            <div class="col-xs-6 m-b">
              <span class="block panel padder-v bg-primary item">

                  <button class="btn btn-sm btn-icon btn-rounded btn-dark" ng-if="userPackList.length > 0 && showPackIndex>0" style="position: absolute;left: 10px;top: 80px;" ng-click="changeUserPack(-1)"><i class="fa fa-arrow-left"></i></button>
                  <button class="btn btn-sm btn-icon btn-rounded btn-dark" ng-if="userPackList.length > 0 && showPackIndex<userPackList.length"  style="position: absolute;right: 10px;top: 80px;" ng-click="changeUserPack(1)"><i class="fa fa-arrow-right"></i></button>

                <span ng-if="userPackList.length == 0" class="text-muted text-xs block m-b-xs">当前使用套餐</span>
                <span ng-if="userPackList.length > 0" class="text-muted text-xs block m-b-xs">当前已购套餐</span>
                <span ng-if="userPackList.length == 0 || showPackIndex == userPackList.length" class="text-white font-thin h2 block m-b-sm">按 0.4 <span class="text-xs">厘/请求</span> <a href="#" class="text-xs" tooltip-placement="bottom" tooltip="0.4厘 = 0.0004元"><i class="fa fa-question-circle text-muted"></i></a> 收费</span>
                <span ng-if="userPackList.length > 0 && showPackIndex < userPackList.length" class="text-white font-thin h2 block m-b-sm">
                  {{package[userPackList[showPackIndex].index].name}} <span class="text-xs">请求次限制: {{package[userPackList[showPackIndex].index].level[userPackList[showPackIndex].level_id].limit}}次</span>
                </span>
              </span>
              <div class="panel-footer text-center b m-t-n-md bg-light lter">
                <button ng-if="userPackList.length == 0 || showPackIndex == userPackList.length" class="btn m-b-xs btn-primary" ng-click="getPackage()">购买套餐</button>
                <span ng-if="userPackList.length > 0 && showPackIndex < userPackList.length" style="height: 39px;" class="block">
                  <span class="text-xs">有效期至：{{userPackList[showPackIndex].end_at | date:'yyyy-MM-dd HH:mm'}}</span>
                  <span ng-if="userPackList[showPackIndex].useInfo"  class="text-xs m-l-md">今日已使用：{{userPackList[showPackIndex].useInfo.count}}次</span>
                </span>
                <progressbar ng-if="userPackList[showPackIndex].useInfo" value="packUsePercent" class="progress-xxs m-b-none" style="margin-top: -2px;"></progressbar>
              </div>
            </div>
            <div class="col-xs-6">
              <span class="block panel padder-v bg-success item">
                <span class="text-muted text-xs block m-b-xs">手机</span>
                <span class="text-white font-thin h2 block m-b-sm" ng-bind="userInfo.tel"></span>
              </span>
              <div class="panel-footer text-center b m-t-n-md bg-light lter ">
                <button class="btn m-b-xs btn-success" ng-click="reset_phone()">修改手机</button>
              </div>
            </div>

            <div class="col-xs-6">
              <span class="block panel padder-v bg-danger item">
                <span class="text-muted text-xs block m-b-xs">账户余额</span>
                <span class="text-white font-thin h2 block m-b-sm">{{userInfo.money ? userInfo.money.balance : 0 | number:2}} 元</span>
              </span>
              <div class="panel-footer text-center b m-t-n-md bg-light lter">
                <button class="btn m-b-xs btn-danger" ng-click="recharge()">去充值</button>
              </div>
            </div>
          </div>
          <div class="line line-lg b-b b-light"></div>

          <div class="panel wrapper" style="margin: 0 10px;">
            <label class="i-switch bg-warning pull-right">
              <input type="checkbox" ng-model="showSpline">
              <i></i>
            </label>
            <h4 class="font-thin m-t-none m-b text-muted">近7日使用趋势</h4>
            <div ui-jq="plot" ui-refresh="refreshChart" ui-options="
              [
                { data: {{d0_1}}, points: { show: true, radius: 2}, splines: { show: {{showSpline}}, tension: 0.4, lineWidth: 1, fill: 0.8 } }
              ],
              {
                colors: ['{{app.color.info}}'],
                series: { shadowSize: 3 },
                xaxis:{ font: { color: '#a1a7ac' }, ticks:{{xArr}} },
                yaxis:{ font: { color: '#a1a7ac' }, max:{{maxTime}} },
                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#dce5ec' },
                tooltip: true,
                tooltipOpts: { content: '使用次数：%y',  defaultTheme: false, shifts: { x: 10, y: -25 } }
              }
            " style="height:246px" >
            </div>
          </div>

        </div>
        <!--<div class="col-sm-3">-->
          <!--<div class="panel">-->
            <!--post-->
          <!--</div>-->
        <!--</div>-->
      </div>
    </div>
  <!--</div>-->
  <!-- / main -->
</div>
